<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="swiper.min.css">
</head>
<style>
	.swiper-container{
		width: 800px;
		height: 600px;
	}
	.swiper-container:hover .swiper-button-next,.swiper-container:hover .swiper-button-prev{
		display: block;
	}
	.swiper-button-next,.swiper-button-prev{
		display: none;
		color: #fff;
		opacity: 0.7;
	}
</style>
<body>
<div class="swiper-container">
	<div class="swiper-wrapper">
		<img src="1.jpg" alt="" class="swiper-slide">
		<img src="2.jpg" alt="" class="swiper-slide">
		<img src="3.jpg" alt="" class="swiper-slide">
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>
    <script src="jquery.js"></script>
    <script src="swiper.jquery.min.js"></script>
    <script type="text/javascript">
    	var mySwiper=new Swiper('.swiper-container',{
    		effect:'slide',
    		//threshold:10,    拖拽距离大于xx，触发切换
    		loop:true,
    		autoplay:2000,
    		pagination:'.swiper-pagination',
    		paginationClickable:true,
    		nextButton:'.swiper-button-next',
    		prevButton:'.swiper-button-prev',
    	})
    	$(".swiper-button-next,.swiper-button-prev").hover(function(){    //悬停，离开。透明度变化
    		$(this).css("opacity","1")
    	},function(){
    		$(this).css("opacity","0.7")
    	})
    </script>
</body>
</html>